<template>
  <div class="body-bg">
    <NavBar></NavBar>
    <div class="content-app" >
      <transition name="fadeInUp" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <Footer></Footer>
    <BackTop></BackTop>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import NavBar from '@oj/components/NavBar.vue'
  import Footer from '@oj/components/Footer.vue'

  export default {
    name: 'app',
    components: {
      NavBar,
      Footer
    },
    data () {
      return {
        version: process.env.VERSION
      }
    },
    created () {
      try {
        document.body.removeChild(document.getElementById('app-loader'))
      } catch (e) {
      }
    },
    mounted () {
      this.getWebsiteConfig()
    },
    methods: {
      ...mapActions(['getWebsiteConfig', 'changeDomTitle'])
    },
    computed: {
      ...mapState(['website'])
    },
    watch: {
      'website' () {
        this.changeDomTitle()
      },
      '$route' () {
        this.changeDomTitle()
      }
    }
  }
</script>

<style lang="less">
  .body-bg {
      padding: 0px;
      position: relative;
      min-height: 100vh;
    }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
    background-color: transparent;
    &:active, &:hover {
      outline-width: 0;
    }
  }



  .content-app {
    width:75%;margin:0 auto;
    margin-top: 80px;
    padding-left: 10px;
    padding-right: 10px;
    min-height:100%;
    padding-bottom: 280px;  
  }
  

  .fadeInUp-enter-active {
    animation: fadeInUp .8s;
  }

  ::-webkit-scrollbar {
    height: 0;
    width: 0;
    color: transparent;
  }

  /*定义滚动条样式（高宽及背景）*/
  ::-webkit-scrollbar {
      z-index: 9999999;
      width: 8px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
      background: #fdfeff74;
  }
  /*定义滚动条轨道（凹槽）样式*/
  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
      border-radius: 3px;
  }
  /*定义滑块 样式*/
  ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      height: 100px;    /* 滚动条滑块长度 */
      background-color: rgb(160, 156, 156);
  }

</style>
